<template>
  <div>
    <div class="con_mid">
      <div v-for="item in dictKeyList" :key="item.dictKey" class="con_mid_item">
        <scrollTableCard
          v-if="item && item.type === 'LIST'"
          :dictKey="item.dictKey"
          :data="item.data"
          :width="242"
          :height="292"
          :title="item.title"
          :data-list="item.dataList"
          @requestData="getData(item)"
        />
        <energyDesk
          v-if="item && item.type === 'DESK'"
          :dictKey="item.dictKey"
          :data="item.data"
          :width="458"
          :height="292"
          :title="item.title"
          :data-list="item.dataList"
          @requestData="getDeskData(item)"
        />
        <lineCharts
          v-if="item && item.type === 'LINE_SPC'"
          :dictKey="item.dictKey"
          :data="item.data"
          :width="350"
          :height="292"
          :title="item.title"
          :options="item.options"
          @mid-line="labelLayoutLineFn(item)"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import scrollTableCard from "@/views/common/energy/components/scrollTableCard.vue";
import energyDesk from "@/views/common/energy/components/energyDesk.vue";
import lineCharts from "@/views/common/energy/components/lineCharts/index.vue";
import * as energyModel from "@/api/modules/energy";

interface Props {
  /**  有 title 时传入 */
  energyTitle?: string;
  title?: string;
  /**  有按钮时传入，传入后会有 btn-click 事件 */
  button?: string;
  activeName?: string;
  /**  title 栏右侧文字 */
  // rightText?: string | number;
  /**  模块最低宽度，默认 330px */
  width?: number;
  /**  模块最低高度，默认 200px */
  height?: number;
  /**  是否需要背景阴影，默认为true */
  boxShadow?: boolean;
  /**  是否需要圆角，默认为true */
  borderRidus?: boolean;
  /**是否搜索 */
  isSerch?: boolean;
  /**科室 */
  className?: any;
  /**能源类型 */
  energyType?: string;
  queryTimeType?: string;
  queryParams?: any;
  dateRange?: any;
  dictKeyList?: Array<any>;
}

const props = withDefaults(defineProps<Props>(), {});

const labelLayoutFnLine = (ec: any, xdata: Array<string>, ydata: Array<number>, title: string) => {
  const { getWidth } = ec;
  const labelLayout = function (params) {
    const isLeft = params.labelRect.x < getWidth() / 2;
    const points = params.labelLinePoints;
    points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
    return { labelLinePoints: points };
  };
  const options: CommonEcharts.CommonEchartsOption = {
    color: ["#ccc"],
    grid: {
      left: "20px",
      top: "40px",
      right: "10px",
      bottom: "10px",
      containLabel: true
    },
    legend: {},
    tooltip: {
      trigger: "axis",
      confine: true,
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999"
        }
      }
    },
    xAxis: {
      type: "category",
      boundarGap: false,
      data: xdata
    },
    yAxis: {
      name: "Particle (pcs/L)",
      type: "value",
      max: 700,
      min: 0
    },
    series: [
      {
        data: ydata,
        type: "line",
        markLine: {
          symbol: "none",
          data: [
            {
              name: "最大值",
              yAxis: 700,
              lineStyle: {
                color: "#FF0000",
                wideh: "1",
                type: "dashed"
              },
              label: {
                show: false
              }
            },
            {
              name: "标准值",
              yAxis: 400,
              lineStyle: {
                color: "#00E272",
                wideh: "1",
                type: "dashed"
              },
              label: {
                show: false
              }
            },
            {
              name: "最小值",
              yAxis: 0,
              lineStyle: {
                color: "#FF0000",
                wideh: "1",
                type: "dashed"
              },
              label: {
                show: false
              }
            }
          ]
        }
      }
    ]
  };
  return options;
};

const labelLayoutLineFn = async (ec: any) => {
  const title = "Module";
  const params = getParams(ec);
  const res: any = await energyModel.spcIndicator(params);
  if (!res?.detail.length) return null;
  const xData = getValueList(res?.detail, "timeFormat") || [];
  const yData = getValueList(res?.detail, "value") || [];
  ec.options = labelLayoutFnLine(ec, xData, yData, title);
};

const getParams = (val: any) => {
  return {
    ...props.queryParams,
    startTime: props.dateRange && props.dateRange.length ? props.dateRange[0] : props.queryParams.startTime,
    endTime: props.dateRange && props.dateRange.length ? props.dateRange[1] : props.queryParams.endTime,
    energyType: props.energyType,
    className: props.className,
    queryTimeType: props.queryTimeType,
    dictKey: val.dictKey
  };
};
const getData = async (item: any) => {
  const params = getParams(item);
  const res: any = await energyModel.consumeByDict(params);
  item.dataList = res.detail || [];
  return res;
};
const getDeskData = async (item: any) => {
  const params = getParams(item);
  const res: any = await energyModel.consumeByDict(params);
  // icon列表，需要手动配置
  const iconList = ["consume_all", "consume_fab", "consume_fp", "consume_life"];
  const data = res.detail || [];
  data.forEach((item: any, index: number) => {
    item.icon = iconList[index];
  });
  item.dataList = data;
  return res;
};

// 获取对象数组某一项value组成的数组
const getValueList = (arr: any[], key: number | string) => {
  let valueList = [];
  arr.forEach(item => {
    valueList.push(item[key]);
  });
  return valueList;
};
</script>

<style lang="scss" scoped>
.con_mid {
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-width: 1300px;
  height: 292px;
  margin-bottom: 16px;

  .con_mid_item {
    flex: 1;
  }

  .con_mid_item:not(:first-child) {
    margin-left: 16px;
  }

  .width_3 {
    width: 33%;
  }

  .width_6 {
    width: 16%;
  }

  .width_5 {
    width: 20%;
  }

  .width_2_5 {
    width: 45%;
  }
}
</style>
